<script setup lang="ts">
import { ref, reactive, watch, onMounted, onUnmounted, nextTick } from "vue";
import ReTable from "@/components/ReTable/index.vue";
import { useSettingStoreHook } from "@/store/modules/settings";
import ReNewDialog from "@/components/ReNewDialog/index.vue";
import {
  ElMessage,
  ElMessageBox,
  type FormInstance,
  type FormRules
} from "element-plus";
import type { Action } from "element-plus";
defineOptions({
  name: "buySchemeList"
});
interface ValueType {
  val: {
    buttonType: string;
  };
  row: object;
}
interface BuyFormType {
  title: string;
  buy_num: string;
  discounts_ratio: string;
  sort: string;
  status: string;
}
const pureSetting = useSettingStoreHook();
const dialogViewVisible = ref(false);
const ruleFormRef = ref<FormInstance>();
watch(
  () => pureSetting.buttonInfo,
  (newValue, oldValue) => {
    if (Object.keys(newValue).length !== 0) {
      let value = newValue as ValueType;
      switch (value.val.buttonType) {
        case "edit":
          dialogViewVisible.value = true;
          break;
      }
    }
  },
  {
    immediate: true,
    deep: true
  }
);
const buyForm = reactive<BuyFormType>({
  title: "",
  buy_num: "",
  discounts_ratio: "",
  sort: "",
  status: ""
} as BuyFormType);
const rules = reactive<FormRules>({
  title: [{ required: true, message: "请输入标题", trigger: "blur" }],
  buy_num: [{ required: true, message: "请输入购买数量", trigger: "blur" }],
  discounts_ratio: [
    { required: true, message: "请输入折扣比例", trigger: "blur" }
  ],
  sort: [{ required: true, message: "请输入排序", trigger: "blur" }],
  status: [{ required: true, message: "请选择状态", trigger: "blur" }]
});
const handleCloseDialog = () => {
  console.log("关闭弹窗");
  resetForm(ruleFormRef.value);
};
const handleConfirmDialog = () => {
  console.log("确认弹窗");
  submitForm(ruleFormRef.value);
};
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      resetForm(formEl);
    } else {
      console.log("error submit!", fields);
    }
  });
};
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  dialogViewVisible.value = false;
};
</script>
<template>
  <div class="buy-scheme-list-container">
    <ReTable class="content-body" type="buySchemeList" />
    <ReNewDialog
      :visible="dialogViewVisible"
      dialogTitle="修改盲盒购买方案信息"
      @close="handleCloseDialog"
      @confirm="handleConfirmDialog"
    >
      <template #content>
        <el-form
          ref="ruleFormRef"
          :model="buyForm"
          :rules="rules"
          label-width="140px"
        >
          <el-form-item label="标题" prop="title">
            <el-input v-model="buyForm.title" placeholder="请输入标题" />
          </el-form-item>
          <el-form-item label="购买数量" prop="buy_num">
            <div class="flex-1 mr-6">
              <el-input
                v-model="buyForm.buy_num"
                disabled
                placeholder="请输入购买数量"
              />
            </div>
            <span class="text-xs">此方案一次购买几个</span>
          </el-form-item>
          <el-form-item label="折扣比例" prop="discounts_ratio">
            <div class="flex-1 mr-6">
              <el-input
                v-model="buyForm.discounts_ratio"
                placeholder="请输入折扣比例"
              />
            </div>
            <span class="text-xs">单价100元，输入0.02则优惠2元</span>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input v-model="buyForm.sort" placeholder="请输入排序" />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-switch
              v-model="buyForm.status"
              size="large"
              inline-prompt
              active-text="启用"
              inactive-text="禁用"
            />
          </el-form-item>
        </el-form>
      </template>
    </ReNewDialog>
  </div>
</template>
